<!--
 * Description: CBOM基础数据
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Dongxu.Ni
 * Date: 2020/04/14 02:52
-->

<template>
  <div style="height:100%">
    <!-- 查询条件 -->
    <BaseFunc
      :is-requesting="isRequesting"
      :query-form="queryForm"
      :visible.sync="advanceOptionDrawer"
      @query="query"
    >
      <!--抽屉内部查询表单-->
      <template>
        <el-form class="g-advance-drawer-form" label-width="100px" :model="queryForm" size="medium">
          <el-row>
            <!--产品专案-->
            <el-col :span="6">
              <el-form-item :label="$t('Cbom.project')">
                <el-select v-model="queryForm.project" clearable filterable size="small">
                  <el-option
                    v-for="item in projectList"
                    :key="item.projectId"
                    :label="item.projectName"
                    :value="item.projectName"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!--Subject-->
            <el-col :span="6">
              <el-form-item label="Subject">
                <el-input v-model="queryForm.subject" clearable />
              </el-form-item>
            </el-col>
            <!--Tracking Sku-->
            <el-col :span="6">
              <el-form-item :label="$t('Cbom.trackingSku')">
                <el-input v-model="queryForm.trackingSku" clearable />
              </el-form-item>
            </el-col>
            <!--CBOM版本-->
            <el-col :span="6">
              <el-form-item :label="$t('Cbom.cbomVersion')">
                <el-input v-model="queryForm.cbomVersion" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </BaseFunc>

    <!--数据表格-->
    <BaseTable
      :is-requesting="isRequesting"
      :page-number.sync="pageNumber"
      :page-size.sync="pageSize"
      :table-data="tableData"
      :total="total"
      @query="query"
    >
      <template slot="header">
        <!--序号列-->
        <el-table-column align="center" fixed :label="$t('table.NO')" min-width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
      </template>

      <template>
        <!--产品专案-->
        <el-table-column
          align="center"
          :label="$t('Cbom.project')"
          min-width="300px"
          prop="project"
          sortable
        />

        <!--Subject-->
        <el-table-column align="center" label="Subject" min-width="200px" prop="subject" sortable />

        <!--Tracking Sku-->
        <el-table-column
          align="center"
          :label="$t('Cbom.trackingSku')"
          min-width="200px"
          prop="trackingSku"
          sortable
        />
        <!--CBOM版本-->
        <el-table-column
          align="center"
          :label="$t('Cbom.cbomVersion')"
          min-width="200px"
          prop="cbomVersion"
          sortable
        />
        <!-- Base Cost -->
        <el-table-column
          align="center"
          label="Base Cost"
          min-width="160px"
          prop="baseCost"
          sortable
        />

        <!-- CBOM Cost -->
        <el-table-column
          align="center"
          label="CBOM Cost"
          min-width="160px"
          prop="cbomCost"
          sortable
        />

        <!-- TEC Pool Cost -->
        <el-table-column
          align="center"
          label="TEC Pool Cost"
          min-width="160px"
          prop="tecPoolCost"
          sortable
        />

        <!-- EC/DFC Cost -->
        <el-table-column
          align="center"
          label="EC/DFC Cost"
          min-width="140px"
          prop="ecDfcCost"
          sortable
        />
        <!-- FD Cost -->
        <el-table-column align="center" label="FD Cost" min-width="120px" prop="fdCost" sortable />

        <!--是否报价-->
        <el-table-column align="center" label="是否报价" min-width="200px" prop="isQuote" sortable>
          <template slot-scope="scope">
            {{ scope.row.isQuote ? '已报价' : '未报价' }}
          </template>
        </el-table-column>
      </template>

      <!-- 右浮动 -->
      <template slot="end">
        <!--操作列-->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('table.operate')"
          min-width="200px"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="rowQute(scope.row)">
              <i class="el-icon-view el-icon--right"></i>
              {{ $t('button.view') }}
            </el-button>
            <el-button
              :disabled="scope.row.isQuote"
              size="mini"
              type="text"
              @click="rowQute(scope.row)"
            >
              <i class="el-icon-postcard el-icon--right"></i>
              {{ $t('button.quote') }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTable>
  </div>
</template>
<script>
import { projectSimpleList } from '@/api/quote/project'
import { cbomQuotePageList } from '@/api/cbom/quote'

export default {
  name: 'CbomQuoteConfirmBaseData',
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 高级查询选项抽屉弹出标识
      advanceOptionDrawer: false,
      // 页码
      pageNumber: 1,
      // 页展示行数
      pageSize: 10,
      // 总行数
      total: 0,
      // 表格数据
      tableData: [],
      // 查询表单对象
      queryForm: {},
      // 正在刷新的行的标识
      refreshRowIdList: [],

      projectList: []
    }
  },
  created() {
    this.pageDataInit()

    this.getProjectList()

    /** 刷新数据 */
    this.$bus.$on('cbom-quote-refresh', async rowData => {
      try {
        await this.pageDataInit()
        const currentItem = this.tableData.find(item => item.id === rowData.id)
        this.rowQute(currentItem)
      } catch (error) {
        console.log(error)
      }
    })
  },
  beforeDestroy() {
    /** 刷新数据 */
    this.$bus.$off('cbom-quote-refresh')
  },
  methods: {
    /* 页面数据初始化*/
    pageDataInit() {
      this.query()
    },
    /* 查询表格数据*/
    async query() {
      try {
        this.isRequesting = true
        this.advanceOptionDrawer = false
        const res = await cbomQuotePageList({
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          pageCondition: this.queryForm
        })
        this.tableData = res.data.list
        this.total = res.data.total
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },

    rowQute(rowData) {
      this.$bus.$emit('cbom-quote-list', rowData)
    },

    /** 加载专案 */
    async getProjectList() {
      try {
        const res = await projectSimpleList({})
        this.projectList = res.data
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
